import React, { Component } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  Image,
  Platform,
  ScrollView,
} from 'react-native';

import BasePage from '../common/BasePage';
import Colors from '../../common/Colors';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import TImage from '../../components/TImage';
import QuanziReviewDataListView from './QuanziReviewDataListView';
import Popover from '../common/Popover';
import PopoverConent from '../common/PopoverConent';

import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction';

const TOP_BTN_GROUP_LABELS = ['审核帖子', '审核评论'];
const topArr=[{name:'已处理',key:'review'},{name:'未处理',key:'genderman'},];

export default class QuanziReviewPage extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      isVisible:false,
      buttonRect:{},
    }
    this.state.btnGroupSelectedIndex = 0;
    this._scrollView = null;
    this._pageWidth = SizeUtils.getWindowSize().width;
    this._clickTopBtnTimer = null;
    this.state.scrollEnabled =false
  }
  _enterPage() {
    this.state.btnGroupSelectedIndex = 0;
    super._enterPage();
  }
  _renderContent() {
    var displayArea = {x: 0, y: 0, width: SizeUtils.getWindowSize().width-10, height: 260};
    return (
      <View style={{backgroundColor: Colors.White, paddingTop:0,
          paddingBottom: SizeUtils.translateDesignHeightToCode(0), flexDirection: 'column', flex:1}}>
        { this._renderTitleView()}
        { this._renderChildPage()}
        <Popover
            isVisible={this.state.isVisible}
            fromRect={this.state.buttonRect}
            placement={this.state.isBottom?'top':'bottom'}
            isWhite={true}
            arrowSize={{height:10,width:15}}
            displayArea={displayArea}
            onClose={this._closePopover.bind(this)}>
            <View style={{width: 160,height: 80,}}>
              <PopoverConent titleArr={topArr} popoverPress={this._PopoverPress.bind(this)}/>
            </View>
          </Popover>
      </View>
    )
  }

  _dealEnterPage() {
    this.setState({
      scrollEnabled:true
    })
  }

  _PopoverPress(key){
    this._closePopover();
    
  }
  _onCheckIsUserCallback(result) {
    if(result) {
      this.gotoPage(Config.pages.workHard_write);
    }
  }
  _showPopover(ref) {
      this._popoverbtn.measure((ox, oy, width, height, px, py) => {
        this.setState({
              isVisible: true,
              buttonRect:{x:px-20, y:Platform.OS !== 'ios'?py-5:py-30, width: 0, height: 45}
          });
      });
  }
  _closePopover(){
    this.setState({isVisible: false});
  }
  _renderTitleView(){
    return (
        <View style={{flexDirection:"row", height:SizeUtils.translateDesignHeightToCode(Platform.OS === "ios"?130:66),
            width:SizeUtils.getWindowSize().width,
            paddingTop:Config.tabBarTop,
            justifyContent:"space-between",
            borderBottomWidth:this.props.pageData.showBottomBorder == false ? 0 : SizeUtils.translateDesignNumToCode(3),
            borderColor:"#eeeeee",
            backgroundColor:'#fff'}}>
            <TouchableOpacity onPress={()=>{this.goBack();}}
              style={{width:SizeUtils.translateDesignWidthToCode(200),paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            }}>
          <View style={{flexDirection:"row", height:SizeUtils.translateDesignHeightToCode(51),
              alignItems:"center"}}>
              <Image source={require("../../../resource/images/common/Back-icon.png")}
                  style={{width:SizeUtils.translateDesignWidthToCode(24),
                    height:SizeUtils.translateDesignWidthToCode(41)}}/>
              <View style={{
                  width:SizeUtils.translateDesignWidthToCode(200 - 40 - 24),
                  paddingLeft:SizeUtils.translateDesignWidthToCode(5)}}/>
            </View>
          </TouchableOpacity>
            <View style={{flexDirection: 'row',}} >
              {this._renderTopBtnGroup()}
            </View>
           <View style={{width:SizeUtils.translateDesignWidthToCode(200), paddingRight:SizeUtils.translateDesignWidthToCode(40),
              alignItems:"flex-end"}}>
              {this._renderNavigationBarRightButtonContent()}
           </View>
        </View>
    )
  }
  // _renderNavigationBarRightButtonContent() {
  //   return (
  //     <View style={{flexDirection:'row',alignItems: 'center',}}>
  //       <TouchableOpacity ref={(ref) => this._popoverbtn = ref} onPress = {() => {this._showPopover()}}>
  //         <TImage source={require("../../../resource/images/quanzi/btn_more.png")}
  //           style={{width:34, height:34,marginLeft:10}} resizeMode={"contain"}/>
  //       </TouchableOpacity>
  //     </View>
  //   )
  // }
  _renderChildPage() {
  	console.log(this.props.pageData)
    return(
      <ScrollView style={{width:this._pageWidth,
      		borderColor:'#eeeeee',
        	borderTopWidth:SizeUtils.translateDesignHeightToCode(3),
          height:SizeUtils.getWindowSize().height}}
        ref={(ref) => this._scrollView = ref}
        horizontal={true}   // 水平方向
        showsHorizontalScrollIndicator={false}  // 水平指示器
        showsVerticalScrollIndicator={false}    // 垂直指示器
        pagingEnabled={true}    // 开启分页功能
        alwaysBounceHorizontal={false} //弹性拉动一截
        onScroll={this._onScroll.bind(this)}
        scrollEnabled={false}
      >
        <QuanziReviewDataListView page={this} pageData={{...this.props.pageData,navigationBarHidden:true}}  home={this} type={'tiezi'} style={{width:this._pageWidth}}/>
        <QuanziReviewDataListView page={this} pageData={{...this.props.pageData,navigationBarHidden:true}} home={this} type={'pinglun'} style={{width:this._pageWidth}}/>
      </ScrollView>
    )
  }

  _onScroll(event) {
    let x = event.nativeEvent.contentOffset.x;
    let index = Math.round(x / this._pageWidth);
    console.log("round", index, x / this._pageWidth, x, this._pageWidth);
    if(this.state.btnGroupSelectedIndex != index) {
      this.setState({
        btnGroupSelectedIndex:index,
      })
    }
  }

  _renderTopBtnGroup() {
    return (
      <View style={{flexDirection:"row", width:SizeUtils.translateDesignWidthToCode(330),
        justifyContent:"space-between",
        height:SizeUtils.translateDesignHeightToCode(50)}}>
        {this._getButton(0)}
        {this._getButton(1)}
      </View>
    )
  }

  _getButton(index) {
    return (
      <TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(150), flexDirection:"column",
            alignItems:"center"}}
          onPress={() => this._onPressBtnGroup(index)}>
        <Text style={[styles.topBtnTextStyle, {fontSize:SizeUtils.translateFontSizeToCode(30),
          height:SizeUtils.translateDesignHeightToCode(38),
          color:this.state.btnGroupSelectedIndex == index ? "#ee3535": "#666666",
          backgroundColor:"#00000000", borderWidth:0,}]
            }>{TOP_BTN_GROUP_LABELS[index]}
        </Text>
        <View style={{borderColor:"#ee3535", borderBottomWidth:index == this.state.btnGroupSelectedIndex ? SizeUtils.translateDesignHeightToCode(5) : 0,
          width:SizeUtils.translateDesignWidthToCode(60), height:SizeUtils.translateDesignHeightToCode(20)}}>
        </View>
      </TouchableOpacity>
    )
  }

  _onShowUnderlay() {

  }

  setHorizontalDisable(){
      this.setState({
        scrollEnabled:false
      })
       // this._scrollView.scrollTo({x:this.state.btnGroupSelectedIndex * this._pageWidth});
  }

   setHorizontalEnable(){
      this.setState({
        scrollEnabled:true
      })
       // this._scrollView.scrollTo({x:this.state.btnGroupSelectedIndex  * this._pageWidth});
  }



  _onPressBtnGroup(selectedIndex) {

    if(this._clickTopBtnTimer) {
      return;
    }
      this.setState({
        scrollEnabled:true
      })

    this._clickTopBtnTimer = setTimeout(() => {
      this._clearClickTopBtnTimer();
    }, 300);
    this._scrollView.scrollTo({x:selectedIndex * this._pageWidth});
  }

  _clearClickTopBtnTimer() {
    this._clickTopBtnTimer && clearTimeout(this._clickTopBtnTimer)
    this._clickTopBtnTimer = null;
  }
}

var styles = StyleSheet.create({
  topBtnTextStyle: {
    textAlign:"center",
  },
});
